<template>
    <div class="app-container">
        <div class="project-manage">
            <div class="main-nav">
                <div><el-button @click="showLayer('add')">新增</el-button></div>
                <div><el-button @click="showLayer('revise')">修改</el-button></div>
                <div><el-button @click="deleteMember()">删除</el-button></div>
            </div>
            <div class="main-table">
                <el-table highlight-current-row @current-change="itemChoosen" v-loading='tableLoading'   :data="tableList" height="620" border style="width: 100%">
                    <el-table-column align="center" prop="name" label="用户登入名" > </el-table-column>
                    <el-table-column align="center" prop="userName" label="用户名" > </el-table-column>
                    <el-table-column align="center" prop="roleName" label="角色" > </el-table-column>
                    <el-table-column align="center" prop="loginIp" label="上次登入IP" > </el-table-column>
                    <el-table-column align="center" prop="loginTime" label="上次登入时间" > </el-table-column>
                    <el-table-column align="center" prop="creater" label="创建人" > </el-table-column>
                    <el-table-column align="center" prop="createrTime" label="创建时间" > </el-table-column>
                    <el-table-column align="center" prop="modifier" label="修改人" > </el-table-column>
                    <el-table-column align="center" prop="modifierTime" label="修改时间" > </el-table-column>
                    <el-table-column  width="100" label="状态">
                        <template  slot-scope="scope">
                            <el-button @click="changeState(scope)" size="mini">{{itemState(scope)}}</el-button>
                        </template>
                    </el-table-column>     
                </el-table>
                <div class="block">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalPage"
                        @current-change="handleCurrentChange"    
                    >
                    </el-pagination>
                </div>
            </div>
            <template name='用户操作'>
               <el-dialog center :title="addMember? '新建用户' : '修改用户' " :visible.sync="showRevise">
                    <div class="layerForm">
                        <el-form ref="userForm" :rules="userFormRule" :label-position="'left'" label-width="100px" :model="formLabelAlign">
                            <el-form-item prop="userName" label="用户名：">
                                <el-input  v-model="formLabelAlign.userName"></el-input>
                            </el-form-item>
                           <el-form-item prop="password" label="密码：">
                                <el-input  type="password" v-model="formLabelAlign.password"></el-input>
                            </el-form-item>
                            <el-form-item prop="confirmPassword" label="确认密码：">
                                <el-input type="password" v-model="formLabelAlign.confirmPassword"></el-input>
                            </el-form-item>
                            <el-form-item prop="name" label="姓名：">
                                <el-input  v-model="formLabelAlign.name"></el-input>
                            </el-form-item>
                            <!-- <el-form-item prop="orgName"  label="所属组织：">
                                 <el-cascader
                                    expand-trigger="hover"
                                    :options="orgList"
                                    v-model="organizationList"
                                    :props="orgListProps"
                                    change-on-select
                                    >
                                </el-cascader>
                            </el-form-item> -->
                            <el-form-item prop="role"  label="角色">
                                <el-checkbox-group @change="handleCheckedRoleChange"  v-model="roleArray"  >
                                <div v-for="(item,index) in roleList" > <el-checkbox :key='index' :label="item.id">{{item.roleName}}</el-checkbox></div>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="submit()" type="primary">确 定</el-button>
                        <el-button @click="showRevise = false" class="cancel">取 消</el-button>
                    </div>
                </el-dialog>
            </template>
        </div>
    </div>
</template>
<script>
import {getuserList, forbind, addMember, reviseMember, orgList, roleList, deleteMember} from '@/api/systemManage'

export default {
    data() {
        return {
            tableList:[],
            tableLoading:false,
            currentPage:1,
            totalPage:0,
            showRevise:false,
            addMember:'',
            formLabelAlign:{userName:'',password:'',confirmPassword:'',name:'',role:''},
            organizationList:[],
            roleArray:[],
            layerItem:'',
            orgList:[],
            orgListProps:{value:'id',label:'name',children:'children'},
            roleList:[],
             userFormRule: {
                    name: [
                        { required: true, message: '请输入姓名',trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                    ],
                    userName: [
                        { required: true, message: '请输入用户名',trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }                        
                    ],
                    password: [
                        { required: true, message: '请输入密码' ,trigger: 'blur'}
                    ],
                    confirmPassword: [
                        { required: true, message: '请输入确认密码',trigger: 'blur' }
                    ],
                    }
        }
    },
    methods: {
        gettableList(current) {
            this.tableLoading = true
            let data= 
                {
                "current": current || this.currentPage,
                "size": 10
                }
            getuserList(data).then(res=>{
                console.log(res)
                this.tableList = res.data.data.records
                this.totalPage = res.data.data.total
                this.tableLoading = false
            }).catch(res=>{
                this.tableLoading = false
                console.log(res)
            })
        },
        handleCurrentChange(current) {
            this.gettableList(current)
        },
        itemState(item){
            if(item.row.state === '启用'){
                return '停用'
            }else if(item.row.state === '停用'){
                return '启用'
            }
        },
        changeState(item){
            //启用时 调禁用接口
            console.log(item)
            console.log('hshs')
            const id = item.row.id
            const data = {}
            forbind(id,data).then(res=>{
                this.gettableList()
            }).catch(res=>{
                this.$message.warning('操作异常')
            })
        },
        itemChoosen(item){
            this.layerItem = item
        },
        deleteMember() {
            if(this.layerItem != ''){
                const id = this.layerItem.id
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        deleteMember(id).then(res=> {
                            if(res.data.code === 0){
                                this.$message.success('删除成功')
                                this.gettableList()
                            }else{
                                this.$message.error('删除失败')
                            }
                        })
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                    });
                
            }else{
                this.$message.warning('请选择成员')
            }
        },
        showLayer(value){
            this.showRevise = false
            this.formLabelAlign = {userName:'',password:'',confirmPassword:'',name:'',role:''}
            this.roleArray = []
            this.organizationList = []
            if(value === 'add'){
                this.addMember = true
                this.showRevise = true
            } else if(value === 'revise'){
                console.log(this.layerItem)
                if(this.layerItem != ''){
                    this.addMember = false
                    this.showRevise = true
                    this.formLabelAlign.userName = this.layerItem.userName
                    this.formLabelAlign.name = this.layerItem.name
                }else{
                    this.$message.warning('请选择成员')
                    return false
                }
                
            } else {
                return false
            }
            this.getorgList()
            this.getroleList()
        },
        getorgList() {
            orgList().then(res=> {
                console.log('orgList')
                console.log(res)
                this.orgList = res.data.data
            })
        },
        getroleList() {
            roleList().then(res=>{
               this.roleList = res.data.data
               console.log(this.roleList)
            })
        },
        handleCheckedRoleChange(value) {
            this.formLabelAlign.role = value
        },
        validArray() {
            if(this.formLabelAlign.password.trim() === this.formLabelAlign.confirmPassword.trim()){
              return true
            }else{
                this.$message.error('密码不一致')
                return false
            }
        },
        submit() {
            this.$refs.userForm.validate((valid) => {
                if (valid && this.validArray()) {
                    const data = {
                    "name": this.formLabelAlign.name,
                   
                    "password": this.formLabelAlign.password,
                    "roleId": this.formLabelAlign.role,
                    "userName": this.formLabelAlign.name,
                    }
                    console.log('参数')
                    console.log(data)
                    if(this.addMember){
                        addMember(data).then(res=> {
                            console.log(res)
                            if(res.data.code === 0){
                                this.showRevise = false
                                this.$message.success('添加成功')
                                this.gettableList()
                            }else if(res.data.code === 500103){
                                this.$message.error('用户名已存在')
                            }
                        }).catch(() =>{
                            this.$message.error('操作异常')
                        })
                    }else{
                        data.id = this.layerItem.id
                        reviseMember(data).then(res=>{
                            console.log('ssssssss')
                            console.log(res)
                            
                            this.showRevise = false
                            if(res.data.code === 0){
                                this.$message.success('修改成功')
                                this.gettableList()
                            }else{
                                this.$message.error('修改失败')
                            }
                        }).catch(()=>{
                            this.$message.error('操作异常')
                        })
                    }
                
                }
            });
            let arr = []
            // if(formLabelAlign.manager != ''){
            //     arr.push(formLabelAlign.manager)
            // }
            // if(formLabelAlign.name != ''){
            //     arr.push(formLabelAlign.name)
            // }
            // if(formLabelAlign.organization != ''){
            //     arr.push(formLabelAlign.organization)
            // }

            
        }
        
    },
    created () {
        this.gettableList()
    }
  
}
</script>
<style rel="stylesheet/scss" lang="scss">
   @import "src/styles/mixin.scss";
    .project-manage{
        .main-top{
            padding: 32px 15px;
            padding-bottom: 20px;
            background-color: #FFF;
            .el-input{
                width: 150px ;
            }
            .el-button{
                padding: 11px 33px;
                margin-left: 5px;
            }
            .el-form-item{
                margin-right: 0px;
            }
        }
        .main-nav{
            @include navStyle
        }
        .addenp{
            .el-form-item{
            margin-bottom: 10px;
            }
            .el-dialog__body{
            padding: 30px 35px;
            padding-bottom: 0px;
            }
            .dialog-footer{
            padding:11px 50px 29px 0px;
            text-align: right;
            .el-button{
                padding: 10px 30px;
                border: none;
            }
            .cancel{
                color: #000;
                background: #E0E0E0;
                border-radius: 3px;
            }
            }
        }
        .block{
            text-align: center;
            margin-top: 15px;
        }
         .layerForm{
            padding: 0 70px;
            .el-input{
                width: 300px;
            }
            .el-date-editor{
                width: 300px !important;
            }
        }
        .el-dialog{
            width:40% !important;
        }
    }
</style>
